<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title伪类选择器></title>
		<style>
			/* 伪类选择器  语法：任意选择器：hover【悬停】  每个伪类选择器，具备特点
			               所有元素具备：hover  【常见伪类选择器】
			*/
			h1:hover{
				background: #ffff00;
				color: #aaaaff;
			}
			/* 伪类选择器    :lisk    链接未点击时状态
                            :active  链接被点击时状态
							:visited 链接点击后状态
							:hover   悬浮链接时状态
				主要结合在一起，针对a元素效果		
			*/
		   a:link{ /*未访问状态*/
			   color: #55ffff;
			   /* 去掉超链接下划线 */
			   text-decoration: none;
		   }
		   a:active{ /*被点击时状态*/
			   color: #00ff00;
			   background: #55ffff;
		   }
		   a:visited{/*点击后状态*/
			   color: #00ff00;
			   background: #55aaff;
		   }
		   a:hover{
			   font-size: 36px;
		   }
		   /**
			* 伪类选择器：  input:focus  获取焦点  鼠标点击输入框时效果
			* 针对  输入框 input元素
            */
		   input:focus{
			   background-color: #55ff7f;
		   }
		   /* 伪类选择器        :first-child  第一个儿子元素
			                   :last-child   最后一个儿子元素
							   :nth-child(n) 匹配n个儿子元素
			  针对：父子级，默认父子级	table、列表..	
							   */
			li:first-child{
				color: #55ff7f;
				background-color: #aaaaff;
			}				  
			li:last-child{
				font-size: 15px;
			}	
			li:nth-child(2){
				background-color: #55ffff;
				font-size: 36px;
			}
			li:nth-child(3){
				background-color: #55ffff;
				font-size: 36px;
			}
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text">
		<!-- 元素之间存在父子级关系，默认存在父子级关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>